<template>
  <a-dropdown placement="bottomRight" :trigger="['click']" :overlayStyle="{boxShadow:'0 2px 8px rgba(0,0,0,.15)'}">
    <span class="ant-pro-account-avatar" >
      <a-badge :count="(userInfo.unSysMsgNum || 0) + (userInfo.unWorkMsgNum || 0) || 0">
        <a-icon type="bell" style="font-size:16px;" />
      </a-badge>
    </span>
    <template v-slot:overlay>
      <div style="width:300px;background-color:#fff;box-shadow:1px 1px 5px #00000010;padding:10px;box-sizing:border-box;">
      <div  @click="e => e.preventDefault()" @click.stop="handleClick">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" :tab="`通知${userInfo.unSysMsgNum?`(${userInfo.unSysMsgNum})`:''}`">
            <div class="awm-overlay-content">
              <a-list item-layout="horizontal" :data-source="list" :bordered="false">
                <a-list-item slot="renderItem" slot-scope="item">
                  <a-list-item-meta @click="handleDetails" class="isRead">
                    <!-- <div slot="avatar" style="font-size:20px;line-height:38px;color:#fff;background:#F5222D;width:40px;height:40px;border-radius:25px;text-align:center;"><a-icon theme="filled" type="mail"/></div> -->
                    <a-avatar slot="avatar" style="backgroundColor:#F5222D" icon="mail" />
                    <div slot="title" class="item-title" :class="{isRead:item.isRead}">{{ item.title }}</div>
                    <div slot="description" class="item-content" :class="{isRead:item.isRead}">{{ item.addTime }}</div>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" :tab="`消息${userInfo.unWorkMsgNum?`(${userInfo.unWorkMsgNum})`:''}`">
            <div class="awm-overlay-content">
              <a-list item-layout="horizontal" :data-source="msglist">
                <a-list-item slot="renderItem" slot-scope="item">
                  <a-list-item-meta @click="handleDetails" class="isRead">
                    <!-- <div slot="avatar" style="font-size:20px;line-height:38px;color:#fff;background:#F5222D;width:40px;height:40px;border-radius:25px;text-align:center;"><a-icon theme="filled" type="mail"/></div> -->
                    <a-avatar slot="avatar" style="backgroundColor:#1890ff" icon="dingding" />
                    <div slot="title" class="item-title" :class="{isRead:item.isRead}">{{ item.title }}</div>
                    <div slot="description" class="item-content" :class="{isRead:item.isRead}">{{ item.addTime}}</div>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </div>
          </a-tab-pane>
        </a-tabs>
        <div style="text-align:center;border-top:1px solid #e8e8e8;padding:10px 0 0;">
          <a @click="handleMsgAll">查看全部</a>
        </div>
      </div>
      </div>
    </template>
  </a-dropdown>
</template>

<script>
import { Modal } from 'ant-design-vue'
import { getUserMsgList, userMsgRead } from '@/api/login'
import { mapGetters } from 'vuex'
import { Ellipsis } from '@/components'
import { msgTypeList } from '@/utils/other'

export default {
  name: 'AvatarDropdown',
  components: {
    Ellipsis,
  },
  props: {
    currentUser: {
      type: Object,
      default: () => null,
    },
    menu: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      img: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
      list: [],
      msglist: []
    }
  },
  computed: {
    ...mapGetters({ userInfo: 'userInfo' }),
  },
  created() {
    this.getMsg()
  },
  methods: {
    getMsg() {
      getUserMsgList({ pageNum: 1, pageSize: 5, type: 1 }).then((res) => {
        this.list = res.data.data
      })
      getUserMsgList({ pageNum: 1, pageSize: 5, type: 2 }).then((res) => {
        this.msglist = res.data.data
      })
    },
    handleClick(){
      
    },
    msgClick(record) {
      userMsgRead({ msgId: record.id }).then((res) => {
        
      })
    },
    handleDetails(a_item){
      
      this.$router.push({path:`/account/msg`})
    },
    handleMsgAll(){
      this.$router.push('/account/msg')
    }
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-dropdown-content{
  box-shadow: 0 2px 8px rgba(0,0,0,.85);
}
/deep/ .ant-badge-count{
  height: 16px;
  font-size: 10px;
  line-height: 16px;
  padding: 0 2px;
  min-width: 16px;
}
/deep/ .ant-list-split .ant-list-item{
  border-bottom: none;
}
.ant-pro-drop-down {
  /deep/ .action {
    margin-right: 8px;
  }
  /deep/ .ant-dropdown-menu-item {
    min-width: 160px;
  }
}
.awm-overlay-content {
  padding: 0 20px;
  width: 100%;
  // height: 200px;
  background-color: #fff;
  // overflow: auto;
  // box-shadow: 0 2px 8px rgba(0,0,0,.35);
  &::-webkit-scrollbar {
    width: 5px; /*对垂直流动条有效*/
    height: 10px; /*对水平流动条有效*/
    }

    /*定义滚动条的轨道颜色、内阴影及圆角*/
    &::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
    border-radius: 3px;
    }


    /*定义滑块颜色、内阴影及圆角*/
    &::-webkit-scrollbar-thumb{
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
    background-color: #E8E8E8;
    }

    /*定义两端按钮的样式*/
    &::-webkit-scrollbar-button {
    display: none;
    }

    /*定义右下角汇合处的样式*/
    &::-webkit-scrollbar-corner {
    display: none;
    }
}
.ant-list-items {
  width: 100%;
}
.ant-list-item {
  overflow: hidden;
  cursor: pointer;
  padding: 10px 0;
  &:hover {
  }
}
.item-title {
  width: 200px;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.item-content {
  width: 200px;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.isRead{
  opacity: .5;
}
</style>
